﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>impression</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico" />

    <link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/vendor/icofont.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/plugins/animate.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/swiper-bundle.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/nice-select.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/venobox.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <!--        <link rel="stylesheet" th:href="@{/assets/css/typo.css}">-->
    <link rel="stylesheet" th:href="@{/assets/prism/prism.css}">

</head>

<body>

    <main class="main-wrapper">
        <!-- .....:::::: Start Header Section :::::.... -->
        <header class="header-section sticky-header d-none d-lg-block">
            <div class="header-wrapper">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col">
                            <!-- Start Header Logo -->
                            <a href="index.html" class="header-logo">
                                <img src="assets/images/logo/logo.png" alt="">
                            </a>
                            <!-- End Header Logo -->
                        </div>
                        <div class="col-auto">
                            <!-- Start Header Menu -->
                            <ul class="header-nav">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="has-dropdown">
                                    <a th:href="@{/skill}">我的技能</a>
                                </li>
                                <li class="has-dropdown">
                                    <a th:href="@{/blog}">博客</a>
                                </li>
                                <li><a th:href="@{/project}">项目</a></li>
                                <li class="has-dropdown">
                                    <a href="#">其它</a>
                                    <ul class="submenu">
                                        <li><a th:href="@{/about}">关于我</a></li>
<!--                                        <li><a th:href="@{/contact}">联系我</a></li>-->
                                    </ul>
                                </li>
                            </ul>

                            <!-- End Header Menu -->
                        </div>

                        <div class="col">
                            <div class="header-btn-link text-end">
                                <a th:href="@{/about}" class="btn btn-sm btn-outline-one icon-space-left"> About Me <i class="icofont-double-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- .....:::::: End Header Section :::::.... -->

        <!-- .....:::::: Start Mobile Header Section :::::.... -->
        <div class="mobile-header d-block d-lg-none">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <div class="mobile-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mobile-action-link text-end">
                            <a href="#mobile-menu-offcanvas" class="offcanvas-toggle offside-menu"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .....:::::: Start MobileHeader Section :::::.... -->

        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-rightside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header text-right">
                <button class="offcanvas-close"><i class="icofont-close-line"></i></button>
            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">
                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>

                            <li><a th:href="@{/index}">首页</a></li>

                            <li>
                                <a th:href="@{skill}"><span>技能</span></a>

                            </li>
                            <li>
                                <a th:href="@{blog}" href="#"><span>博客</span></a>
                            </li>
                            <li><a th:href="@{/project}">项目</a></li>
                            <li>
                                <a th:href="@{about}"><span>关于我</span></a>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->

                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info text-center">
                    <ul class="social-link">
                        <li><a target="_blank" href="https://example.com"><i class="icofont-facebook"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-twitter"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-skype"></i></a></li>
                    </ul>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div>

        <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!-- Offcanvas Overlay -->
        <div class="offcanvas-overlay"></div>

        <!-- ...::: Start Breadcrumb Section :::... -->
        <div class="breadcrumb-section section-bg overflow-hidden pos-relative">
            <div class="breadcrumb-shape-top-left"></div>
            <div class="breadcrumb-shape-bottom-right"></div>
            <div class="breadcrumb-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <h2 class="title">技能介绍</h2>
                                <ul class="breadcrumb-link">
                                    <li><a th:href="@{/skill}">我的技能</a></li>
                                    <li class="active" aria-current="page">页面详情</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Breadcrumb Section :::... -->

        <!-- ...::: Start Service Details Section :::... -->
        <div class="service-details-section section-gap-tb-165">
            <div class="service-details-box">
                <div class="container">
                    <div class="row flex-lg-row flex-column-reverse">
                        <div class="col-xl-4 col-lg-5">
                            <!-- Start Sidebar Widget Area-->
                            <div class="sidebar-widget-area">
                                <!-- Start Sidebar Widget Single Item - Catagory Widgets -->
                                <div class="sidebar-widget-single-area catagory-widgets">
                                    <h3 class="title">其它技能</h3>
                                    <ul class="widget-nav-list catagory-item-list" th:each="skill : ${skillList}">
                                        <li><a th:href="@{/skill/{skillId}/details(skillId = ${skill.id})}"><span class="text">[[ ${ skill.name } ]]</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>
<!--                                        <li><a href="#"><span class="text">数据结构</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>-->
<!--                                        <li><a href="#"><span class="text">前端</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>-->
<!--                                        <li><a href="#"><span class="text">数据库</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>-->
                                    </ul>
                                </div>
                                <!-- End Sidebar Widget Single Item - Catagory Widgets -->

                                <!-- Start Sidebar Widget Single Item - Resume Widgets -->
<!--                                <div class="sidebar-widget-single-area resume-widgets">-->
<!--                                    <h3 class="title">Resume</h3>-->
<!--                                    <ul class="widget-nav-list resume-item-list">-->
<!--                                        <li><a href="#"><span class="text">Get Resume.pdf</span><span class="icon"><i class="icofont-file-pdf"></i></span></a></li>-->
<!--                                        <li><a href="#"><span class="text">Get Resume.doc</span><span class="icon"><i class="icofont-file-word"></i></span></a></li>-->
<!--                                        <li><a href="#"><span class="text">Get Resume.ppt</span><span class="icon"><i class="icofont-file-powerpoint"></i></span></a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
                                <!-- End Sidebar Widget Single Item - Resume Widgets -->
                            </div>
                            <!-- End Sidebar Widget Area-->
                        </div>
                        <div class="col-xl-7 col-lg-7 offset-xl-1" >
                            <!-- Start Service Content Section -->
                            <div class="service-content-section" th:each="skill : ${skills}">
                                <div class="content-hero-image">
<!--                                    <img th:src="${skill.cover}" src="assets/images/service/service-details-hero-img.jpg" alt="">-->
                                </div>
                                <!-- Start Section Content -->
                                <div class="default-content-style pos-relative">
                                    <span class="section-tag" style="color: #1abc9c;
                                     font-size: 30px; font-family: Consoles,sans-serif; padding-bottom: 30px;" th:text="${skill.name}">UI/UX Design</span>
<!--                                    <h2 class="title">UI design can make easy your complex product.</h2>-->

                                    <div th:utext="${skill.content}"></div>
<!--                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum-->
<!--                                        has been the industry's standard dummy text ever since the 1500s, when an unknown print-->
<!--                                        took a galley of type and scrambled it to make a type specimen book. It has survived not-->
<!--                                        only five centuries, but also the leap into electronic.</p>-->

<!--                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum-->
<!--                                        has been the industry's standard dummy text ever since the 1500s, when an unknown print-->
<!--                                        took a galley of type and scrambled electronic.</p>-->

<!--                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum-->
<!--                                        has been the industry's standard dummy text ever since the 1500s, when an unknown print-->
<!--                                        took a galley of type and scrambled electronic.</p>-->

<!--                                    <h3 class="sub-title">Why Choose Me?</h3>-->
<!--                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum-->
<!--                                        has been the industry's standard dummy text ever since the 1500s, when an unknown print-->
<!--                                        took a galley of type and scrambled electronic.</p>-->

<!--                                    <ul class="content-list-item content-list-with-text">-->
<!--                                        <li>-->
<!--                                            <div class="left">-->
<!--                                                <h4 class="list-title">Leadership</h4>-->
<!--                                            </div>-->
<!--                                            <div class="right">-->
<!--                                                <p>Lorem Ipsum is simply dummy text of the printing and-->
<!--                                                    has been the industry's standard dummy text ever-->
<!--                                                    took a galley of type make.</p>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <div class="left">-->
<!--                                                <h4 class="list-title">Team Work</h4>-->
<!--                                            </div>-->
<!--                                            <div class="right">-->
<!--                                                <p>Lorem Ipsum is simply dummy text of the printing and-->
<!--                                                    has been the industry's standard dummy text ever-->
<!--                                                    took a galley of type make.</p>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                        <li>-->
<!--                                            <div class="left">-->
<!--                                                <h4 class="list-title">Flexibility</h4>-->
<!--                                            </div>-->
<!--                                            <div class="right">-->
<!--                                                <p>Lorem Ipsum is simply dummy text of the printing and-->
<!--                                                    has been the industry's standard dummy text ever-->
<!--                                                    took a galley of type make.</p>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum-->
<!--                                        has been the industry's standard dummy text ever since the 1500s, when an unknown print-->
<!--                                        took a galley of type and scrambled it to make a type specimen book. It has survived not-->
<!--                                        only five centuries, but also the leap into electronic.</p>-->

<!--                                    <h3 class="sub-title">My Service Planing</h3>-->
<!--                                    <p>Lorem Ipsum is simply dummy text the printing and typesetting industry has been industry-->
<!--                                        standard dummy text ever since the scrambled electronic.</p>-->


                                </div>
                                <!-- End Section Content -->

                            </div>
                            <!-- End Service Content Section -->


                            <!-- Start Pricing Area -->
<!--                            <ul class="pricing-area">-->
<!--                                &lt;!&ndash; Start Pricing Single Item &ndash;&gt;-->
<!--                                <li class="pricing-single-item">-->
<!--                                    <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                    <h4 class="name">Basic</h4>-->
<!--                                    <h2 class="value">$90</h2>-->
<!--                                    <span class="time">/mo</span>-->
<!--                                    <ul class="list-items">-->
<!--                                        <li>01 Landing page</li>-->
<!--                                        <li>08 Inner page</li>-->
<!--                                        <li>03 Months support</li>-->
<!--                                        <li>04 Revision</li>-->
<!--                                    </ul>-->
<!--                                    <a href="#" class="btn btn-lg btn-outline-one">Get Started</a>-->
<!--                                </li>-->
<!--                                &lt;!&ndash; End Pricing Single Item &ndash;&gt;-->
<!--                                &lt;!&ndash; Start Pricing Single Item &ndash;&gt;-->
<!--                                <li class="pricing-single-item">-->
<!--                                    <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                    <h4 class="name">Standard</h4>-->
<!--                                    <h2 class="value">$100</h2>-->
<!--                                    <span class="time">/mo</span>-->
<!--                                    <ul class="list-items">-->
<!--                                        <li>03 Landing Page</li>-->
<!--                                        <li>18 Inner page</li>-->
<!--                                        <li>07 Months support</li>-->
<!--                                        <li>Unlimited Revision</li>-->
<!--                                    </ul>-->
<!--                                    <a href="#" class="btn btn-lg btn-outline-one">Get Started</a>-->
<!--                                </li>-->
<!--                                &lt;!&ndash; End Pricing Single Item &ndash;&gt;-->
<!--                            </ul>-->
                            <!-- End Pricing Area -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Service Details Section :::... -->

        <!-- ...::: Start Company Logo Display Section :::... -->
<!--        <div class="company-logo-display  section-bg-2  section-gap-tb-165">-->
<!--            <div class="company-logo-display-box">-->
<!--                <div class="container">-->
<!--                    <div class="row">-->
<!--                        <div class="col">-->
<!--                            &lt;!&ndash; Start Section Content &ndash;&gt;-->
<!--                            <div class="section-content pos-relative">-->
<!--                                <span class="section-tag">Favourite Clients</span>-->
<!--                                <h2 class="section-title">Work With Trusted Comapny.</h2>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Section Content &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="company-logo-display-wrapper">-->
<!--                        <div class="row">-->
<!--                            <div class="col">-->
<!--                                <div class="company-logo-display-slider">-->
<!--                                    &lt;!&ndash; Slider main container &ndash;&gt;-->
<!--                                    <div class="swiper-container">-->
<!--                                        &lt;!&ndash; Additional required wrapper &ndash;&gt;-->
<!--                                        <div class="swiper-wrapper">-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-1.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/1.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-2.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/2.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-3.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/3.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-4.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/4.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- ...::: End Company Logo Display Section :::... -->

        <span th:replace="~{common::footer}"></span>


        <!-- material-scrolltop button -->
        <button class="material-scrolltop" type="button"></button>
    </main>

    <!-- Global Vendor, plugins JS -->

    <!-- JS Files
    ============================================ -->
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>

    <!--Plugins JS-->
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.appear.min.js"></script>
    <script src="assets/js/plugins/jquery.nice-select.js"></script>
    <script src="assets/js/plugins/venobox.min.js"></script>
    <script src="assets/js/plugins/jquery.waypoints.js"></script>
    <script src="assets/js/plugins/images-loaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/counter.js"></script>
    <script src="assets/js/plugins/ajax-mail.js"></script>
    <script src="assets/js/plugins/material-scrolltop.js"></script>

    <!-- Minify Version -->
    <!-- <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> -->

    <!--Main JS (Common Activation Codes)-->
    <script src="assets/js/main.js"></script>

</body>

</html>
